<script setup lang="ts">
/**
 * @author lwlianghehe@gmail.com
 * @date 2025/08/04
 */
import { ref, computed } from "vue";
import { ElDialog, ElButton, ElInput, ElForm, ElFormItem, ElSelect, ElOption } from 'element-plus';
import { ContentBlockData } from './types';

const props = withDefaults(defineProps<{
  modelValue?: boolean
  title?: string
  width?: string | number
  initialData?: ContentBlockData
}>(), {
  modelValue: false,
  title: '内容块',
  width: '500px',
  initialData: () => ({
    type: 'iframe',
    width: undefined,
    height: undefined,
    address: '',
    html: ''
  })
})

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'confirm', data: ContentBlockData): void
  (e: 'cancel'): void
}>()

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val: boolean) => {
    emit('update:modelValue', val)
  }
})

const formRef = ref()
const formData = ref<ContentBlockData>({
  type: 'iframe',
  width: 0,
  height: 0,
  address: '',
  html: ''
})

// 表单验证规则
const rules = {
  type: [
    { required: true, message: '请选择类型', trigger: 'change' }
  ],
  address: [
    { required: true, message: '请输入地址', trigger: 'blur' }
  ]
}

// 类型选项
const typeOptions = [
  { label: '网址', value: 'iframe' },
  { label: '视频', value: 'video' }
]



// 确认处理
const handleConfirm = async () => {
  try {
    await formRef.value.validate()
    emit('confirm', formData.value)
    dialogVisible.value = false
  } catch (error) {
    // 验证失败，不关闭对话框
  }
}

// 取消处理
const handleCancel = () => {
  emit('cancel')
  dialogVisible.value = false
  resetFormData()
}

// 重置表单数据
const resetFormData = () => {
  formData.value = {
    type: 'iframe',
    width: 0,
    height: 0,
    address: '',
    html: ''
  }
}

// 当对话框打开时重置数据
const handleOpen = () => {
  resetFormData()
  
  // 如果有初始数据，设置到表单
  if (props.initialData) {
    formData.value = { ...props.initialData }
  }
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    :width="width"
    :close-on-click-modal="false"
    :close-on-press-escape="true"
    @open="handleOpen">
    
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="60px">
      
      <el-form-item label="类型" prop="type" required>
        <el-select
          v-model="formData.type"
          placeholder="请选择类型"
          style="width: 100%">
          <el-option
            v-for="option in typeOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="宽度">
        <el-input
          v-model.number="formData.width"
          type="number"
          placeholder="请输入宽度"
          clearable />
      </el-form-item>
      
      <el-form-item label="高度">
        <el-input
          v-model.number="formData.height"
          type="number"
          placeholder="请输入高度"
          clearable />
      </el-form-item>
      
      <el-form-item label="地址" prop="address" required>
        <el-input
          v-model="formData.address"
          placeholder="请输入地址"
          clearable />
      </el-form-item>
      
      <el-form-item label="HTML">
        <el-input
          v-model="formData.html"
          type="textarea"
          :rows="4"
          placeholder="请输入HTML代码（仅网址类型有效）"
          resize="none" />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-form-item {
  margin-bottom: 18px;
}

.el-textarea {
  font-family: 'Courier New', Consolas, 'Liberation Mono', Menlo, monospace;
}

:deep(.el-textarea__inner) {
  font-family: 'Courier New', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
}

:deep(.el-input__wrapper) {
  border-radius: 4px;
}

:deep(.el-dialog__header) {
  padding: 20px 20px 10px 20px;
}

:deep(.el-dialog__body) {
  padding: 10px 20px 20px 20px;
}

:deep(.el-dialog__footer) {
  padding: 10px 20px 20px 20px;
  text-align: right;
}


</style> 